<template>
  <div class="w-full h-full p-[15px]">
    <div class="w-full h-full border border-solid border-[#4c4d4f] rounded p-3">
      <div class="flex gap-10 text-[15px]">
        <div
          class="relative w-[fit-content] h-[30px] cursor-pointer"
          v-for="(i, index) in navbardata"
          :class="{
            'text-[--them-color] before:absolute before:bottom-0 before:left-[50%] before:translate-x-[-50%] before:w-[50%] before:h-[2px] before:bg-[--them-color]':
              navchange == index,
          }"
          @click="changenavindex(index)"
        >
          {{ i.name }}
        </div>
      </div>
      <div class="h-[calc(100%-60px)] mt-7 overflow-auto abcds">
        <productcard
          v-for="i in showdata"
          :key="i.id"
          :data="i"
          @shuaixn="shuaixn"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import productcard from "@/components/index/productcard/index.vue";
import { getproducts } from "@/api/index";
const navchange = ref(0);
const proddata = ref([]);
const showdata = ref([]);
const navbardata = [
  {
    name: "待审核商品",
    v: "0",
  },
  {
    name: "全部商品",
  },
];
onMounted(() => {
  getdata();
});
const getdata = async () => {
  const rudata = await getproducts();
  if (rudata.code == 200) {
    proddata.value = rudata.data;
    showdata.value = rudata.data.filter((i: any) => i.status == 0);
  }
};
const changenavindex = (i: number) => {
  navchange.value = i;
  if (!i) {
    showdata.value = proddata.value.filter((i: any) => i.status == 0);
    return;
  }
  showdata.value = proddata.value;
};
const shuaixn = () => {
  getdata();
};
</script>
<style>
.abcds::-webkit-scrollbar {
  width: 2px;
}
</style>
